<template>
    <div class="handleInput">
        <div class="input-title">{{ title }}</div>
        <div class="input-ipt flex">
            <div class="input-ipt_icon flex-center">
                <i v-if="iconfontName" class="iconfont" :class="[iconfontName]"></i>
            </div>
            <input
                ref="input"
                :placeholder="placeholder"
                @keyup.enter="onKeyupEnter"
                class="reset-input"
                @input="handleInput"
                :value="value"
                :type="type"
                :maxlength="maxLength"
            />
            <!-- 后置元素 -->
            <div class="input-ipt_append" v-if="$slots.append">
                <slot name="append"></slot>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'loginInput',
        props: {
            title: { type: String, default: '' },
            value: {
                type: [String, Number],
                default: ''
            },
            type: { type: String, default: 'text' },
            iconfontName: { type: String, default: '' },
            maxLength: { type: Number },
            onKeyupEnter: {
                type: Function,
                default: () => {
                    return function () {}
                }
            },
            placeholder: [String, Number]
        },
        data() {
            return {}
        },
        methods: {
            handleInput(event) {
                this.$emit('input', event.target.value)
            }
        }
    }
</script>

<style lang="less" scoped>
    @import './index.less';
</style>
